/*
 * Created by DuHuiling on 2017/4/27.
 */

/**
 * 回到顶部组件
 * @class BacKTop
 * @extends Basic
 * @param  [visibilityHeight] 自定义滚动高度，默认400
 *
 * @param [right] 距离右边的大小，默认20px
 *
 * @param [onClick]  点击事件，默认为空，自定义点击后执行的事件
 *
 *
 * @author chenzefang
 *
 * 示例：
 *
 *     @example
 *     <BackTop visibilityHeight='0' right='100' />
 */
var Backtop = React.createClass({   // 自定义宽高50
    getDefaultProps: function(){
        return {
            id: '',
            visibilityHeight: '400', //可配置滚动多高才出现，默认400
            right: '20'
        }
    },
    getInitialState: function(){
        return {
            right:'-120px',
            className: this.props.className?'ucs-backtop '+this.props.className : 'ucs-backtop'
        }
    },
    onClick: function(){
        // var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
        this.setState({right:'-120px'});
        this.props.onClick? this.props.onClick():null;
    },
    componentDidMount: function(){
        EventListener.addEventHandler(window,'onscroll',function(){
            var t = document.documentElement.scrollTop || document.body.scrollTop;
            if(t > this.props.visibilityHeight){
                this.setState({right:this.props.right+'px'});
            }else{
                this.setState({right:'-120px'});
            }
        }.bind(this))
    },
    render:function(){
        return(
            <div ref='backtop' {...this.props} style={{right:this.state.right}} className={this.state.className} onClick={this.onClick}>{this.props.children}</div>
        )
    }
})
module.exports = Backtop;



